<template>
	<view class="content">
		<!-- 轮播图组件 -->
    <Banner />
    <mescroll-body ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
      <!-- 分类组件 -->
          <Category />
          <!-- 下方内容都有padding值，所以统一放到一个盒子里，加左右的padding值 -->
          <view class="container">
            <!-- 热门推荐 -->
            <view class="course-list">
              <Title name="热门课程" word="HOT"/>
              <SwiperCourse />
            </view>
            <view class="course-list">
              <Title name="近期上新" word="NEW" />
              <ScrollCourse />
            </view>
            <view class="course-list">
              <Title name="付费精品" word="NICE" />
              <ListCourse />
            </view>
          </view>
     </mescroll-body>
	</view>
</template>

<script>
  // mescroll下拉框
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import Banner from '@/components/common/banner'
  import Category from '@/components/category'
  import SwiperCourse from '@/components/swiper-course'
  import Title from '@/components/common/title'
  import ScrollCourse from '@/components/scroll-course'
  import ListCourse from '@/components/list-course'
	export default {
    mixins: [MescrollMixin], // 使用mixin
    components: {
      Banner,
      Category,
      SwiperCourse,
      Title,
      ScrollCourse,
      ListCourse
    },
		data() {
			return {
				title: 'Hello',
        downOption: { // 3. 下拉刷新
          offset: 80, // 下拉高度多少，开始刷新
          textColor: "#FF8095", // 下拉刷新的文本颜色
          textLoading: '刘婷婷真是个小可爱呢！！'
        }
			}
		},
		onLoad() {
      // #ifdef APP-PLUS
      // this.placeholderData()
      // #endif
		},
    /**
     * 监听点击原生输入款时触发的事件
     */
    onNavigationBarSearchInputClicked() {
      uni.navigateTo({url: '/pages/search/search'})
    },
		methods: {
      // 更改搜索框placeholder 滑动的数据
      placeholderData() {
        // 获取当前页面的webview对象
        const webview = this.$scope.$getAppWebview();
        const arr = [ 'APP · 微信小程序', 'Java · SprinBoot', 'SpringCloud · SpringSecurity', 'Vue · React'];
        let i = 0 ;
        webview.setStyle({'titleNView': {'searchInput': {'placeholder': arr[i]}}});
        setInterval(() => {
          i = i < 3 ? ++ i : 0 ;
          webview.setStyle({'titleNView': {'searchInput': {'placeholder': arr[i]}}});
        }, 2000)
      },
      /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/  
      // mescrollInit() {
        
      // },
      /*下拉刷新的回调, 有3种处理方式:*/
      downCallback() {
        // 绝大部分情况methods中都不用写downCallback的,此时会默认调MescrollMixin的downCallback (效果同第2种)
        // 第1种: 请求具体接口
        // uni.request({
        //   url: 'xxxx',
        //   success: () => {
        //     // 请求成功,隐藏加载状态
        //     this.mescroll.endSuccess()
        //   },
        //   fail: () => {
        //     // 请求失败,隐藏加载状态
        //     this.mescroll.endErr()
        //   }
        // })
        // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
        //this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
        // 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
        setTimeout(() => {
          this.mescroll.endSuccess()
        }, 2000)
      },
      /*上拉加载的回调*/
      upCallback(page) {
        // this.mescroll.endErr();
        setTimeout(() => {
          this.mescroll.endErr(); // 隐藏下拉刷新的状态
         // this.mescroll.endBySize
        }, 2000)
      }
		},
    /**
     * 监听扫一扫
     */
    onNavigationBarButtonTap(event) {
      if (event.index === 0) {
        // 打开扫一扫功能
        uni.scanCode({
          success: function(res) {
            uni.navigateTo({
              url: '/pages/public/webview/webview?url=https://www.baidu.com'
            })
          }
        })
      }
      uni.showLoading({
          title: '点击了扫一扫'
      });
      setTimeout(() => {
        uni.hideLoading();
      },2000)
    }
	}
</script>

<style lang="scss">
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
    .container {
      padding: 0 30rpx;
      .course-list {
        margin-top: 30rpx;
      }
    }
	}
</style>
